<template>
  <div>
    <Banner1
      v-model="currentType"
      :name="schemeName"
      :list="typeList"
      @change="changeType"
    />
    <component
      v-for="(i, k) in typeList"
      :key="k"
      :is="i.comment"
      :id="i.value"
      :data="i.data"
      class="scheme_p"
    />
  </div>
</template>
<script setup lang="ts">
import Banner1 from "@/views/mobile/scheme/components/Banner1.vue";
import Advantage from "@/views/mobile/scheme/components/Advantage.vue";
import Framework from "@/views/mobile/scheme/components/Framework.vue";
import Architecture from "@/views/mobile/scheme/components/Architecture.vue";
import Construct from "@/views/mobile/scheme/components/Construct.vue";
import Scene from "@/views/mobile/scheme/components/Scene.vue";
import Recommend from "@/views/mobile/scheme/components/Recommend.vue";
import { publicSrc } from "@/utils/common";
import { solutionList, solutionDetail } from "@/api/scheme";
const router = useRouter();

const currentType = ref<string>(""); // 当前类型
const schemeName = ref<string>(""); // 方案名称
const schemeId = ref<string>(""); // 方案id
const typeList = ref<any>([]); // 方案类型
const scrollItems = ref<any>([]); // 滚动元素

onMounted(() => {
  schemeId.value = router.currentRoute.value.query.id as string;
  getDetail();
  scrollItems.value = document.querySelectorAll(".scheme_p") as NodeListOf<HTMLElement>;
  window.addEventListener("scroll", handScroll);
});

// 监听路由参数变化
watch(
  () => router.currentRoute.value.query,
  (query) => {
    schemeId.value = query.id as string;
  },
  { immediate: true }
);

// 获取方案详情
const getDetail = () => {
  solutionDetail(schemeId.value).then(async (res: any) => {
    if (res.code === 200) {
      schemeName.value = res.data.name;
      const list = <any>[
        { value: "advantage", label: "方案优势", comment: markRaw(Advantage) },
        {
          value: "framework",
          label: "架构与部署",
          image: "image4",
          comment: markRaw(Framework),
        },
        {
          value: "system",
          label: "系统架构",
          image: "image5",
          comment: markRaw(Architecture),
        },
        { value: "construction", label: "建设内容", comment: markRaw(Construct) },
        { value: "scenes", label: "应用场景", comment: markRaw(Scene) },
      ];
      let arr = <any>[];
      list.forEach((i: any) => {
        if (res.data[i.value] && res.data[i.value].length) {
          arr.push({
            ...i,
            data: {
              list: res.data[i.value],
              image: publicSrc(res.data[i.image]),
            },
          });
        }
      });
      let temp = <any>await getRecommendList();
      if (temp.length) {
        arr.push({
          value: "recommend",
          label: "推荐解决方案",
          comment: markRaw(Recommend),
          data: temp,
        });
      }
      typeList.value = arr;
      currentType.value = arr[0].value;
    }
  });
};

// 获取推荐方案列表
const getRecommendList = () => {
  return new Promise((resolve) => {
    solutionList({
      pageNum: 1, // 当前页
      pageSize: 2, // 每页条数
      status: 0, // 0显示 1隐藏
      top: 1, // 0不置顶 1置顶
    })
      .then((res: any) => {
        if (res.code === 200) {
          resolve(res.rows);
        } else {
          resolve([]);
        }
      })
      .catch(() => {
        resolve([]);
      });
  });
};

// 切换类型
const changeType = (id: string) => {
  let temp = document.getElementById(id) as HTMLElement;
  temp.scrollIntoView({ block: "start", behavior: "smooth" });
};

// 同步锚点位置
const handScroll = () => {
  scrollItems.value.forEach((i: any) => {
    let { top, height } = i.getBoundingClientRect();
    if (top < height && top > 0) {
      currentType.value = i.id;
    }
  });
};
</script>
<style lang="scss" scoped></style>
